<template>
  <div class="container">
    <RouterView/>
  </div>
</template>

<script>

</script>

<style scoped>
/* 保持与React版本相同的样式 */
.container {
  height: calc(100vh - env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  background-color: #f0f2f5;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

@media (max-width: 768px) {
  .container {
    height: 100% !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  /* 横屏适配 */
  @media (orientation: landscape) {
    .container {
      height: 80vh;
    }
  }
}

</style>